<template>
  <div class="imageinfoContainer">
      <!-- 顶部基础信息 -->
      <section class="top">
          <h3 class="title">{{imgInfo.title}}</h3>
          <p class="subinfo">
              <span class="author">发布者:{{imgInfo.author}}</span>
              <span class="add_time">{{this.imgInfo.add_time | dateFormat}}</span>
              <span class="click_count">阅读量:{{imgInfo.click_count}}</span>
          </p>
      </section>
      <!-- 简介 -->
      <section class="abstract">
          <p v-html="imgInfo.abstract"></p>
      </section>
      <!-- 缩略图 -->
      <section class="thumbs">
          <!-- Vue-preview使用步骤 -->
          <!-- 1.安装 npm i vue-preview -S -->
          <!-- 2.在main.js中导入import VuePreview from vue-preview -->
          <!-- 3.挂载到Vue身上Vue.use(VuePreview) -->
          <!-- 4.在组建的template模板中，使用它，标签名是vue-preview
          其中slides属性是用来，绑定具体预览图片的数据，这个属性必须有

           -->
           <!-- 在业务逻辑中，通过ajax请求，获取:slides需要的数据 -->
        <vue-preview :slides="thumbList" class="imgPrev"></vue-preview>    
      </section>
      <!-- 评论区 -->
      <section class="cmt">
         <comment :id="this.imgId"> </comment>
      </section>
  </div>
</template>

<script>
import {Toast} from 'mint-ui';
import comment from '../subComponents/comment.vue';
export default {
        data(){
            return{
                imgId:this.$route.params.id,
                imgInfo:{},
                thumbList:[]
            }
        },
        created(){
            this.getImageInfo();
            this.getThumbsList();
        },
        methods:{
            // 获取改组图片的基础信息
            getImageInfo:function(){
                this.$ajax({
                    method:'get',
                    url:'/images/imagesinfo',
                    params:{
                        imgId:this.imgId,
                    }
                }).then(response =>{
                    var data  = response.data;
                    if(data.Status == 0){
                        this.imgInfo = data.Data[0];
                        console.log(this.imgInfo);
                    }else{
                        Toast('获取图片信息失败');
                    }
                })
            },
            // 获取该组图片的缩略图
            getThumbsList:function(){
                this.$ajax({
                    method:'get',
                    url:'/thumbs/' + this.imgId,
                }).then(response =>{
                    var data =response.data;
                    if(data.Status == 0){
                        data.Data.forEach(item =>{
                            item.w = 600;
                            item.h = 400;
                            item.src = item.img_url;
                            item.msrc=item.img_url; 
                        })
                        this.thumbList = data.Data;

                    }else{
                        Toast('获取图片缩略图失败');
                    }
                })
            }
        },
            components:{
                comment,
            }
}
</script>

<style lang="less">
    .imageinfoContainer{
        padding: 10px;
        .top{
            border-bottom: 1px solid #bbb;
            .title{
                font-size: 20px;
                color:#333;
                font-family: "微软雅黑";
                text-align: center;
            }
            .subinfo{
                padding:10px 0;
                display:flex;
                justify-content: space-between;
                margin:0;
            }
        }
        .abstract{
            font-size: 14px;
            padding: 10px;
            color:#444;
            text-indent: 2em;
            line-height:16px
        }
        .thumbs{
            .imgPrev{
                .my-gallery{
                    figure{
                        display:inline-block;
                        margin:9px;
                        img{
                            width:80px;
                            height:60px;
                        }
                    }
                }
            }

        }
    }
</style>